<template>
    <div class="register_container">
        <!--    注册表单-->
        <div class="register_box">
            <el-form ref="register_form_ref" class="register_form" :model="register_form" :rules="register_form_rules">
                <!--        页头字样-->
                <el-form-item>
                    <span class="label">Register</span>
                </el-form-item>
                <!--        用户名-->
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user" placeholder="用户名" v-model="register_form.username"></el-input>
                </el-form-item>
                <!--        用户名-->
                <el-form-item prop="true_name">
                    <el-input prefix-icon="el-icon-user" placeholder="真实姓名" v-model="register_form.true_name"></el-input>
                </el-form-item>
                <!--                邮箱-->
                <el-form-item prop="email">
                    <el-input prefix-icon="el-icon-message" placeholder="邮箱" v-model="register_form.email" @blur="sendEmail"></el-input>
                </el-form-item>
                <!--        密码-->
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" placeholder="密码" v-model="register_form.password" show-password></el-input>
                </el-form-item>
                <!--        重复密码-->
                <el-form-item prop="password2">
                    <el-input prefix-icon="el-icon-lock" placeholder="再次输入密码" v-model="register_form.password2" show-password></el-input>
                </el-form-item>
                <!--        按钮-->
                <el-form-item class="buttons">
                    <el-button type="primary" @click="saveUser">注册</el-button>
                    <el-button type="primary" @click="login">已有账号</el-button>
                    <el-button type="info" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'))
                } else if (value !== this.register_form.password) {
                    callback(new Error('两次输入密码不一致！'))
                } else {
                    callback()
                }
            }
            return {
                register_form: {
                    username: '',
                    true_name: '',
                    email:'',
                    password: '',
                    password2: ''
                },
                register_form_rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max:15, message: '请输入正确的用户名', trigger: 'blur' }
                    ],
                    true_name: [
                        { required: true, message: '请输入真实姓名', trigger: 'blur' },
                        { min: 3, max:15, message: '请输入正确的名字', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '请输入邮箱', trigger: 'change' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 20, message: '请输入6-20位字符', trigger: 'blur' }
                    ],
                    password2: [
                        { required: true, message: '请重复输入密码', trigger: 'blur' },
                        { min: 6, max: 20, message: '请输入6-20位字符', trigger: 'blur' },
                        { validator: validatePass, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            login () {
                this.$router.push('/login')
            },
            reset () {
                this.$refs.register_form_ref.resetFields()
            },
            saveUser() {
                this.$http.post('register',this.register_form).then(res => {
                    console.log(res.data)
                    if(res.data.code === 200) {
                        this.$message({
                            message: '注册成功',
                            type: 'success'
                        })
                        this.$router.push('/login')
                    }
                    else if(res.data.code === 400) {
                        this.$message.error('填写内容有误')
                    }
                    else if((res.data.code === 403)&&(res.data.type === 'email_exist')) {
                        this.$message.error('邮箱已存在')
                    }
                    else if((res.data.code === 403)&&(res.data.type === 'username_exist')) {
                        this.$message.error('用户名已存在')
                    }
                    else {
                        this.$message.error('未知错误')
                    }
                })
            },
            sendEmail() {
                var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                if ((this.register_form.email !== '') && (!regEmail.test(this.register_form.email))) {
                    this.$message({
                        message: '注册邮箱格式不正确',
                        type: 'error'
                    })
                    this.register_form.email = ''
                }
            }

        }
    }
</script>

<style lang="less" scoped>
    .register_container{
        background-color: #fff;
        height: 100%;
    }

    .register_box{
        width: 450px;
        height: 480px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        box-shadow: 0 0 5px 3px rgb(221,221,221);
    }
    .label{
        text-align: center;
        display: block;
        font-size: 22px;
        font-weight: bold;
        color: rgb(105, 105, 105);
    }
    .buttons{
        display: flex;
        justify-content: flex-end;
    }

    .register_form{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 40px;
        box-sizing: border-box;
    }
</style>
